<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page import="dao.UserDAO" %>
<%@ page import="model.UserModel" %>
<%@ page import="common.Constant" %>
<%@page import="java.util.ArrayList"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/style.css" />
    <!--[if IE 6]><link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/iecss.css" /><![endif]-->

    <script type="text/javascript" language="JavaScript">
        function submitFormProfile(){
            document.forms["Profile"].submit();
	}

        function emailCheck() {
            var str = document.forms["Profile"].txtEmail.value.trim();
            var at="@";
            var dot=".";
            var lat=str.indexOf(at);
            var lstr=str.length;
            var ldot=str.indexOf(dot);
            var index = 0;
            if (str.indexOf(at)==-1){
                index ++;
            }

            if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
                index ++;
            }

            if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
                index ++;
            }

            if (str.indexOf(at,(lat+1))!=-1){
                index ++;
            }

            if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
                index ++;
            }

            if (str.indexOf(dot,(lat+2))==-1){
                index ++;
            }

            if (str.indexOf(" ")!=-1){
                index ++;
            }

            if(index != 0){
                alert("Invalid E-mail ID");
                document.getElementById("txtEmail").value = "";
            }
        }

        function checkUserAndEmail(){
            var username = document.getElementById("txtUsername").value.trim();
            var email = document.getElementById("txtEmail").value.trim();
            var tmpU = 0;
            var tmpE = 0;

            <%
                ArrayList<UserModel> userList = UserDAO.findAllUser();
                out.print("if(username != ''){ \n");
                for(Integer i = 0; i<userList.size(); i++){
                    out.print("if(username == '"+userList.get(i).getUsername()+"'){ \n");
                    out.print("tmpU++; \n");
                    out.print("} \n");
                }
                out.print("} \n");

                out.print("if(email != ''){ \n");
                for(Integer i = 0; i<userList.size(); i++){
                    out.print("if(email == '"+userList.get(i).getEmail()+"'){ \n");
                    out.print("tmpE++; \n");
                    out.print("} \n");
                }
                out.print("} \n");
            %>
            if(tmpU != 0){
                alert("Username ''" + username + "'' has been exit!");
                document.getElementById("txtUsername").value = "";
            }
            if(tmpE != 0){
                alert("Email ''" + email + "'' has been exit!");
                document.getElementById("txtUsername").value = "";
            }
        }
    </script>



    <%
        String username = (String) session.getAttribute("username");;
    %>

    <c:choose>
        <c:when test="${not empty sessionScope.username}">
            <c:set var="objProfile" value = '<%= UserDAO.getUserByUsername(session.getAttribute("username").toString()) %>' scope="session"></c:set>
	</c:when>
	<c:otherwise>
            <c:set var="objProfile" value="${requestScope.userInfo}" scope="session" ></c:set>
	</c:otherwise>
    </c:choose>
    
    <title>Profile Page</title>
</head>
<body>
	<div id="main_container">
		<!-- S HEAD CONTENT -->
			<jsp:include page="block/header.jsp" />
		<!-- E HEAD CONTENT -->

		<!-- S Top Menu -->
			<jsp:include page="block/top_menu.jsp" />
		<!-- E Top Menu -->

                <!-- S Navigation -->
			<jsp:include page="block/navigation.jsp" />
		<!-- E Navigation -->

                <!-- S Left Menu -->
			<jsp:include page="block/left_menu.jsp" />
		<!-- E Left Menu -->

		<!-- S Body Content -->
                <form action="UserController?profile=yes" method="post" id="Profile" name="Profile">
                    <c:if test="${not empty param.err}">
                            <b class="error"> Input into the mandatory fields (*) </b>
                    </c:if>
                    <table align="center" cellpadding="3" cellspacing="8" border="0">
                        <tr>
                            <td colspan="4" align="center"> <h1 style="color: aqua"> PROFILE </h1> </td>
                        </tr>
                        <tr>
                            <td>FirstName : </td>
                            <td> <input type="text" id="txtFirstname" name="txtFirstname" maxlength="30" style="background: transparent; color: blue" value="${objProfile.firstname}"></input> </td>
                            <td>LastName : </td>
                            <td> <input type="text" id="txtLastname" name="txtLastname" maxlength="100" style="background: transparent; color: blue" value="${objProfile.lastname}"></input> </td>
                        </tr>
                        <tr>
                            <td>Birthday : </td>
                            <td>
                                <select name="cboMonth" id="cboMonth">
                                    <c:forEach var="iterater" begin="1" end="12" step="1">
                                        <option value="${iterater}" <c:if test="${objProfile.month eq iterater}">selected</c:if>>${iterater}</option>
                                    </c:forEach>
                                </select>

                                <select name="cboDay" id="cboDay">
                                    <c:forEach var="iterater" begin="1" end="31" step="1">
                                        <option value="${iterater}" <c:if test="${objProfile.day eq iterater}">selected</c:if>>${iterater}</option>
                                    </c:forEach>
                                </select>

                                <select name="cboYear" id="cboYear">
                                    <c:forEach var="iterater" begin="1900" end="2010" step="1">
                                        <option value="${iterater}" <c:if test="${objProfile.year eq iterater}">selected</c:if>>${iterater}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td>(mm/dd/yyyy)</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>Email : </td>
                            <td colspan="3"> <input type="text" id="txtEmail" name="txtEmail" style="background: transparent; color: blue; width: 350px" onblur="emailCheck(); checkUserAndEmail(); " value="${objProfile.email}"></input> <label style="color: red">(*)</label> </td>
                        </tr>
                        <tr>
                            <td>Address : </td>
                            <td colspan="3"> <input type="text" id="txtAddress" name="txtAddress" style="background: transparent; color: blue; width: 350px" value="${objProfile.address}"></input></td>
                        </tr>
                        <tr>
                            <td>Phone : </td>
                            <td> <input type="text" id="txtPhone" name="txtPhone" maxlength="20" style="background: transparent; color: blue" value="${objProfile.phone}"></input> </td>
                        </tr>
                        <tr>
                            <td align="center" colspan="4">
                                <input type="button" id="btUpdate" name="btUpdate" value="Update" style="width: 70px; color: navy" onclick="submitFormProfile();"></input>
                                <a href="index.jsp"><input type="button" id="btExit" name="btExit" value="Exit" style="width: 70px; color: navy"></input></a>
                            </td>
                        </tr>
                    </table>
                </form>
		<!-- E Body Content -->

                <!-- S Right Menu -->
			
		<!-- E Right Menu -->

                <!-- S Footer -->
			
		<!-- E Footer -->
	</div>
</body>
</html>